<template>
  <div>
    <table-where :forms="forms" @onSubmit="onSubmit"></table-where>
    <wms-table ref="tableQuery" :tableDatas="tableDatas" @editHandle="editHandle"></wms-table>
  </div>
  <!-- <div v-if="!edit">
    <table-where :forms="editForms" @onSubmit="onSubmit2"></table-where>
  </div> -->
  <el-drawer v-model="edit" title="修改库位" show-close :close-on-click-modal="false" size="50%">
    <table-where :forms="editForms"></table-where>
  </el-drawer>
</template>

<script setup name="库位">
import { ref, reactive } from 'vue'
import { POSTJSON } from '@/components/utils/http'
import { useWmsGlobal } from '@/store/wmsGlobal'
import pinyin from 'js-pinyin'
const wmsGlobal = useWmsGlobal()
const edit = ref(false)
const tableDatas = reactive({
  body: {
    //表数据
    head: 'storeLocation',
    url: '/Information/getStoreLocationPage',
    params: {},
    type: 'POSTJSON'
  },
  delete: {
    url: '/Information/deleteStoreLocation',
    params: { id: 'id' }
  },
  edit: {}
})
const tableQuery = ref()

const onSubmit = () => {
  tableQuery.value.getData()
}
const forms = reactive({
  data: tableDatas.body.params,
  rules: [],
  compValue: [
    { label: '名称', value: 'name', type: 'iconinput' },
    {
      label: '新增',
      type: 'button',
      onclick: () => {
        edit.value = true
        editForms.data = {store_location_stat:1}
      }
    },
    { label: '查询', type: 'button', onclick: onSubmit }
  ]
})
const createPinyin = (value)=>{
  if(!value)return;
  pinyin.setOptions({checkPolyphone: false, charCase: 1}) 
  editForms.data.pinyin = pinyin.getCamelChars(value)
}
const editForms = reactive({
  data: {},
  rules: [],
  inline:true,
  compValue: [
    { label: '仓库', value: 'storage_id', type: 'select', placeholder: '仓库',type: 'select',options: wmsGlobal.wmsOptions['storage_id'], show: true, rule: { required: false } },
    { label: '库区', value: 'store_area_id', type: 'select', placeholder: '库区', type: 'select',options: wmsGlobal.wmsOptions['store_area_id'],show: true, rule: { required: false } },
    { label: '库位', value: 'name', type: 'input', placeholder: '库位', show: true, rule: { required: false } ,change:createPinyin},
    { label: '拼音', value: 'pinyin', type: 'input', placeholder: '拼音', show: true, rule: { required: false } },
    { label: '长度(m)', value: 'len', type: 'numberInput', placeholder: '长度(m)', show: true, rule: { required: false } },
    { label: '高度(m)', value: 'height', type: 'numberInput', placeholder: '高度(m)', show: true, rule: { required: false } },
    { label: '宽度(m)', value: 'width', type: 'numberInput', placeholder: '宽度(m)', show: true, rule: { required: false } },
    { label: '承重(kg)', value: 'weight', type: 'numberInput', placeholder: '承重(kg)', show: true, rule: { required: false } },
    { label: '巷道号', value: 'road', type: 'input', placeholder: '巷道号', show: true, rule: { required: false } },
    { label: '货架号', value: 'store_racks', type: 'input', placeholder: '货架号', show: true, rule: { required: false } },
    { label: '层级号', value: 'level', type: 'input', placeholder: '层级号', show: true, rule: { required: false } },
    { label: '位号', value: 'position_num', type: 'input', placeholder: '位号', show: true, rule: { required: false } },
    { label: '状态', value: 'store_location_stat', type: 'select',options: wmsGlobal.wmsOptions['store_location_stat'], placeholder: '状态', show: true, rule: { required: false } },
    {
      label: '保存',
      type: 'button',
      onclick: () => {
        POSTJSON('/Information/addOrUpdateStoreLocation', editForms.data).then(data => {
          if (data.code === 200) {
            editForms.data = {}
          }
        })
      }
    },
    {
      label: '返回',
      type: 'button',
      onclick: () => {
        edit.value = false
      }
    }
  ]
})
const editHandle = ({ row }) => {
  edit.value = true
  editForms.data = Object.assign({}, row)
}
</script>
